<html>

<head>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>tit</title>
    <link rel="stylesheet" href="css/style1.css">
    <script src="jquery.js"></script>
</head>

<body>
    <div class="header">
        <div class="nav">
            <div class="nav-l">
                <img src="img/logo.svg" alt="">
            </div>
            <div class="nav-center">
                <ul>
                    <a href="">
                        <li>首页</li>
                    </a>
                    <a href="#">
                        <li>热卖手机</li>
                    </a>
                    <a href="">
                        <li>乐随心动</li>
                    </a>
                    <a href="">
                        <li class="selectli">生活周边
                            <div class="select">
                            <ul>
                                <li>7天无理由退货</li>
                                <li>15天免费换货</li>
                                <li>预约维修服务</li>
                            </ul>
                            </div>
                        </li>
                    </a>
                    <a href="">
                        <li>用户社区</li>
                    </a>
                </ul>
            </div>
            <div class="nav-r">
                <div class="logo-1">
                    <img src="img/hdico.png" alt="">
                </div>
                <div class="logo-2">
                    <a href="#">登录</a>|<a href="#">注册</a>
                </div>
            </div>
        </div>
        <div class="header-content">
            <div class="pic">
                <img src="img/545a5b5f0cb6cff72c8abc13968a0adf.jpg" />
                <img src="img/e56e83596263a461406da48e8786fc31.jpg" />
                <img src="img/545a5b5f0cb6cff72c8abc13968a0adf.jpg" >
                
                <div id="left">
                    < </div> 
                    <div id="right">
                        >
                </div>
                <ul id="ulObj">
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <script type="text/javascript">
                $(function() {
                    //刚开始设置一个index，index为图片的索引值
                    var index = 0;
                    //当图片索引为0时,显示对应的图片,其他的隐藏
                    $(".pic img").hide();
                    $(".pic img").eq(index).show();
                    //图片对应的下面的小圆圈设置背景颜色
                    $("#ulObj li").eq(index).css("background-color", "white");
                    //设置一个定时器
                    timer = setInterval(function() {
                        var imgObj = $(".pic img");
                        //index的值加1，如果index值大于3就等于0
                        index++;
                        if (index > 1) {
                            index = 0;
                        }
                        //设置对应之外的小圆圈背景颜色
                        $("#ulObj li").css("background-color", "gray");
                        //设置对应索引的小圆圈背景颜色
                        $("#ulObj li").eq(index).css("background-color", "white");
                        imgObj.fadeOut(1000);



                        imgObj.eq(index).fadeIn(1000);
                    }, 3000);
                    //鼠标悬停清除定时器
                    $(".pic img").mouseenter(function() {
                        clearInterval(timer);
                    });
                    //鼠标移走重启定时器

                    $(".pic img").mouseleave(function() {
                        timer = setInterval(function() {
                            var imgObj = $(".pic img");
                            index++;
                            if (index > 1) {
                                index = 0;
                            }
                            imgObj.fadeOut(1000);
                            imgObj.eq(index).fadeIn(1000);
                            $("#ulObj li").css("background-color", "gray");
                            $("#ulObj li").eq(index).css("background-color", "white");
                        }, 3000);
                    });
                    //点击下一张
                    $("#right").click(function() {
                        index += 1;
                        if (index > 3) {
                            index = 0;
                        }
                        $(".pic img").fadeOut(1000);
                        $(".pic img").eq(index).fadeIn(1000);
                        $("#ulObj li").css("background-color", "lightskyblue");
                        $("#ulObj li").eq(index).css("background-color", "white");
                    });




                    //点击上一张
                    $("#left").click(function() {
                        index -= 1;
                        if (index < 0) {
                            index = 1;
                        }
                        $(".pic img").fadeOut(1000);
                        $(".pic img").eq(index).fadeIn(1000);
                        $("#ulObj li").css("background-color", "lightskyblue");
                        $("#ulObj li").eq(index).css("background-color", "white");
                    });
                    //点击下面的小圆圈显示对应的图片
                    $("#ulObj li").click(function() {
                        //获得被点击的li元素的索引值
                        index = $("#ulObj li").index(this);
                        $("#ulObj li").css("background-color", "lightskyblue");
                        $("#ulObj li").eq(index).css("background-color", "white");
                        //alert(index);
                        $(".pic img").fadeOut(1000);
                        $(".pic img").eq(index).fadeIn(1000);
                    });
                });
            </script>
            </div>
        </div>
    </div>
    <div class="main">
        <!-- 明星产品 -->
        <div class="star">
            <h1>明星产品</h1>
            <div class="starphone">
                <div class="starimg">
                    <img src="img/4909eebb3502fdee0a42eacd1608ee47.jpg" alt="">
                </div>
                <div class="phonename">
                    <span>小米8 青春版</span>
                    <p>潮流镜面见变色，2400万自拍旗舰</p>
                    <p><b>￥1399</b>元起</p>
                    <button>立即购买</button>
                </div>
            </div>
        </div>
        <!-- 爆款推荐 -->
        <div class="hot">
            <h3>爆款推荐</h3>
            <div class="hotphone">
                <div class="hotphone1">
                    <img src="img/24b7f3c26569ea91b68551f32109dcb1.jpg" alt="">
                    <div class="hotnamel">
                        <p>
                            <a href="#">小米8</a>
                        </p>
                        <p>全球首款双频GPS，骁龙845</p>
                    </div>
                    <div class="hotnamer">
                        <p>
                            <span>￥2499</span>元起
                            <span>2699元</span>
                        </p>
                        <button>立即购买</button>
                    </div>
                </div>
                <div class="hotphone1">
                    <img src="img/66f152a9d09d64208a31105ebab61dad.jpg" alt="">
                    <div class="hotnamel">
                        <p>
                            <a href="#">小米8 SE</a>
                        </p>
                        <p>全球首款双频GPS，骁龙845</p>
                    </div>
                    <div class="hotnamer">
                        <p>
                            <span>￥2499</span>元起
                            <span>2699元</span>
                        </p>
                        <button>立即购买</button>
                    </div>
                </div>
                <div class="hotphone1" style="margin-top: 30px;">
                    <img src="img/4cd08effaab7a11d9f88f8ade7258cee.jpg" alt="">
                    <div class="hotnamel">
                        <p>
                            <a href="#">小米MIX3</a>
                        </p>
                        <p>全球首款双频GPS，骁龙845</p>
                    </div>
                    <div class="hotnamer">
                        <p>
                            <span>￥2499</span>元起
                            <span>2699元</span>
                        </p>
                        <button>立即购买</button>
                    </div>
                </div>
                <div class="hotphone1">
                    <img src="img/09853dd931198ae50bc2071bfd092adf.jpg" alt="">
                    <div class="hotnamel">
                        <p>
                            <a href="#">小米6X</a>
                        </p>
                        <p>全球首款双频GPS，骁龙845</p>
                    </div>
                    <div class="hotnamer">
                        <p>
                            <span>￥2499</span>元起
                            <span>2699元</span>
                        </p>
                        <button>立即购买</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 超值特惠 -->
        <div class="price">
            <div class="top">
                <img src="img/xmad_15438386061965_LaDUt.jpg" alt="">
            </div>
            <h3>超值特惠</h3>
            <div class="display">
                <ul>
                    <li class="redmi">
                        <img src="img/6d0aab16e4264a97f615ba3041d71b6c.jpg" alt="">
                        <div class="redmi-bottom">
                            <p><a href="#">红米6</a></p>
                            <p>小屏幕高性能的双摄手机</p>
                            <p><span>￥799</span>起</p>
                            <p>
                                <button>立即购买</button>
                            </p>
                        </div>
                    </li>
                    <li class="redmi">
                        <img src="img/48c324cb12f09b977a54f76377d0d7ef.jpg" alt="">
                        <div class="redmi-bottom">
                            <p><a href="#">红米6</a></p>
                            <p>小屏幕高性能的双摄手机</p>
                            <p><span>￥799</span>起</p>
                            <p>
                                <button>立即购买</button>
                            </p>
                        </div>
                    </li>
                    <li class="redmi">
                        <img src="img/6bbf388339d8fbd2432ed243ddcc3f5f.png" alt="">
                        <div class="redmi-bottom">
                            <p><a href="#">红米6</a></p>
                            <p>小屏幕高性能的双摄手机</p>
                            <p><span>￥799</span>起</p>
                            <p>
                                <button>立即购买</button>
                            </p>
                        </div>
                    </li>
                    <li class="redmi">
                        <img src="img/6d0aab16e4264a97f615ba3041d71b6c.jpg" alt="">
                        <div class="redmi-bottom">
                            <p><a href="#">红米6</a></p>
                            <p>小屏幕高性能的双摄手机</p>
                            <p><span>￥799</span>起</p>
                            <p>
                                <button>立即购买</button>
                            </p>
                        </div>
                    </li>
                    <li class="redmi">
                        <img src="img/48c324cb12f09b977a54f76377d0d7ef.jpg" alt="">
                        <div class="redmi-bottom">
                            <p><a href="#">红米6</a></p>
                            <p>小屏幕高性能的双摄手机</p>
                            <p><span>￥799</span>起</p>
                            <p>
                                <button>立即购买</button>
                            </p>
                        </div>
                    </li>
                    <li class="redmi">
                        <img src="img/6bbf388339d8fbd2432ed243ddcc3f5f.png" alt="">
                        <div class="redmi-bottom">
                            <p><a href="#">红米6</a></p>
                            <p>小屏幕高性能的双摄手机</p>
                            <p><span>￥799</span>起</p>
                            <p>
                                <button>立即购买</button>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer">
        <!-- 尾部上半部分 -->
        <div class="footer-t">
            <ul>
                <li>
                    <a href="#">你还在等什么？</a>
                    <p>知识库</p>
                    <p>手册与指南</p>
                    <p>下载和应用程序</p>
                    <p>
                        <双击查看原因>
                    </p>
                </li>
                <li>
                    <a href="#">你值得拥有</a>
                    <p>最好的手机</p>
                    <p>最好的耳机</p>
                    <p>最好的东西</p>
                    <p>
                        <双击查看原因>
                    </p>
                </li>
                <li>
                    <a href="#">快来购买吧</a>
                    <p>何处购买</p>
                    <p>战略联盟</p>
                    <p>寻找合作伙伴</p>
                    <p>
                        <双击查看原因>
                    </p>
                </li>
                <li>
                    <a href="#">可以看看</a>
                    <p>开发小组</p>
                    <p>技术支持</p>
                    <p>寻找投资关系</p>
                    <p>
                        <双击查看原因>
                    </p>
                </li>
            </ul>
        </div>
        <!-- 尾部下半部分 -->
        <div class="footer-b">
            <div class="footer-b-l">
                <h4>技术部三组</h4>
                <p>开发人员</p>
                <span>唐铭</span>
                <span>赖吴双</span>
                <span>李燕青</span>
                <span>桂宇程</span>
                <span>代杨</span>
            </div>
            <div class="footer-b-r">
                <ul>
                    <li>
                        <img src="img/footLogo1.svg" alt="">
                    </li>
                    <li>
                        <img src="img/footLogo2.svg" alt="">
                    </li>
                    <li>
                        <img src="img/footLogo3.svg" alt="">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>